<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet"  href="/xianwangCss/index.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>
<!-- 头部的盒子 -->
<header>

    <h1>客流量数据展示</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</header>
<div class="my">

    <section class="mainbox">
        <div class="column">
            <div class="panel flow11">
                <h2>日均客流量</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel flow12">
                <h2>各月日均客流量增速</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

        </div>

        <div class="column">
            <div class="panel savetime1">
                <h2>节省时间</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel OD1">
                <h2>待调整线路OD乘客出行人次分布</h2>
                <div class="chart bar1"></div>
                <div class="panel-footer"></div>
            </div>
        </div>

        <div class="column">
            <div class="panel rate11">
                <h2>不同共线站数乘客乘坐地铁比例</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel rate12">
                <h2>线路调整后地铁乘客增加人数</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>



    </section>
</div>
<!-- 页面主体部分 -->

<script>
    (function flexible(window, document) {
        var docEl = document.documentElement;
        var dpr = window.devicePixelRatio || 1;

        // adjust body font size
        function setBodyFontSize() {
            if (document.body) {
                document.body.style.fontSize = 12 * dpr + "px";
            } else {
                document.addEventListener("DOMContentLoaded", setBodyFontSize);
            }
        }
        setBodyFontSize();

        // set 1rem = viewWidth / 10
        function setRemUnit() {
            var rem = docEl.clientWidth / 24;
            docEl.style.fontSize = rem + "px";
        }

        setRemUnit();

        // reset rem unit on page resize
        window.addEventListener("resize", setRemUnit);
        window.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                setRemUnit();
            }
        });

        // detect 0.5px supports
        if (dpr >= 2) {
            var fakeBody = document.createElement("body");
            var testElement = document.createElement("div");
            testElement.style.border = ".5px solid transparent";
            fakeBody.appendChild(testElement);
            docEl.appendChild(fakeBody);
            if (testElement.offsetHeight === 1) {
                docEl.classList.add("hairlines");
            }
            docEl.removeChild(fakeBody);
        }
    })(window, document);

</script>
<script>

    // flow1
    (function() {
        // 1实例化对象
        var myChart = echarts.init(document.querySelector(".flow11 .chart"));
        // 2. 指定配置项和数据
        var option = {
            color: ["#2f89cf"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // 修改图表的大小
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "2018年1月",
                        "2018年2月",
                        "2018年3月",
                        "2018年4月",
                        "2018年5月",
                        "2018年6月",
                        "2018年7月",
                        "均值",
                    ],
                    axisTick: {
                        alignWithLabel: true
                    },
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: "12"
                    },
                    // 不显示x坐标轴的样式
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: 12
                    },
                    // y轴的线条改为了 2像素
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 2
                        }
                    },
                    // y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "日均客流量（万人次/日）",
                    type: "bar",
                    barWidth: "35%",
                    data: [9.38, 8.00, 9.57,9.64, 9.29, 9.53, 11.39, 9.54],
                    itemStyle: {
                        // 修改柱子圆角
                        barBorderRadius: 5
                    }
                }
            ]
        };
        // 3. 把配置项给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    // flow2
    (function() {
        var myChart = echarts.init(document.querySelector(".flow12 .chart"));
        var option = {
            tooltip: {
                trigger: "axis"
            },
            legend: {
                top: "0%",
                data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },

            grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    // x轴更换数据
                    data: [
                        "2018年2月",
                        "2018年3月",
                        "2018年4月",
                        "2018年5月",
                        "2018年6月",
                        "2018年7月",
                        "均值",
                    ],
                    // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // x轴线的颜色为   rgba(255,255,255,.2)
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // 修改分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "各月日均客流量增速",
                    type: "line",
                    smooth: true,
                    // 单独修改当前线条的样式
                    lineStyle: {
                        color: "#0184d5",
                        width: "2"
                    },
                    // 填充颜色设置
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    },
                    // 设置拐点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 8,
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    data: [
                        -14.7,
                        19.65,
                        0.76,
                        -3.61,
                        2.56,
                        19.52,
                        4.03,
                    ]
                },
            ]
        };
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    //save time
    (function() {
        var myChart = echarts.init(document.querySelector(".savetime1 .chart"));
        var option = {
            tooltip: {
                trigger: "axis"
            },
            legend: {
                top: "0%",
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },

            grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    // x轴更换数据
                    data: [
                        "2",
                        "3",
                        "4",
                        "5",
                        "6",
                        "7",
                        "8",
                        "9",
                        "10",
                        "11",
                        "12",
                        "13",
                        "14",
                    ],
                    // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // x轴线的颜色为   rgba(255,255,255,.2)
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // 修改分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "线路长度",
                    type: "line",
                    smooth: true,
                    // 单独修改当前线条的样式
                    lineStyle: {
                        color: "#0184d5",
                        width: "2"
                    },
                    // 填充颜色设置
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    },
                    // 设置拐点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 8,
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    data: [
                        -4.89,
                        -4.41,
                        -1.71,
                        0.67,
                        0.57,
                        4.17,
                        4.86,
                        6.99,
                        9.15,
                        11.7,
                        13.1,
                        15.6,
                        18.8,
                    ]
                },

            ]
        };
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    // rate1
    (function() {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".rate11 .chart"));
        // 2.指定配置
        var option = {
            // 通过这个color修改两条线的颜色
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                trigger: "axis"
            },
            legend: {
                // 如果series 对象有name 值，则 legend可以不用写data
                // 修改图例组件 文字颜色
                textStyle: {
                    color: "#4c9bfd"
                },
                // 这个10% 必须加引号
                right: "10%"
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true, // 显示边框
                borderColor: "#012f4a", // 边框颜色
                containLabel: true // 包含刻度文字在内
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "2个共站",
                    "3个共站",
                    "4个共站",
                    "5个共站",
                    "6个共站",
                ],
                axisTick: {
                    show: false // 去除刻度线
                },
                axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                },
                axisLine: {
                    show: false // 去除轴线
                }
            },
            yAxis: {
                type: "value",
                axisTick: {
                    show: false // 去除刻度线
                },
                axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                },
                axisLine: {
                    show: false // 去除轴线
                },
                splitLine: {
                    lineStyle: {
                        color: "#012f4a" // 分割线颜色
                    }
                }
            },
            series: [
                {
                    name: "线路调整前地铁乘客比例",
                    type: "line",
                    // true 可以让我们的折线显示带有弧度
                    smooth: true,
                    data: [14.54,23.48,31.37,32.85,45.08]
                },
                {
                    name: "线路调整后地铁乘客比例",
                    type: "line",
                    smooth: true,
                    data: [16.69,27.67,37.81,47.37,64.07]
                },
            ]
        };

        // 3. 把配置给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();

    // rate2
    (function() {
        // 1实例化对象
        var myChart = echarts.init(document.querySelector(".rate12 .chart"));
        // 2. 指定配置项和数据
        var option = {
            color: ["#2f89cf"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // 修改图表的大小
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "2个共站",
                        "3个共站",
                        "4个共站",
                        "5个共站",
                        "6个共站",
                    ],
                    axisTick: {
                        alignWithLabel: true
                    },
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: "12"
                    },
                    // 不显示x坐标轴的样式
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: 12
                    },
                    // y轴的线条改为了 2像素
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 2
                        }
                    },
                    // y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "增加人数",
                    type: "bar",
                    barWidth: "35%",
                    data: [9317, 16161, 22654,69991, 199682],
                    itemStyle: {
                        // 修改柱子圆角
                        barBorderRadius: 5
                    }
                }
            ]
        };
        // 3. 把配置项给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    // OD
    (function() {
        var myChart = echarts.init(document.querySelector(".OD1 .chart"));
        var option = {
            color: [
                "#006cff",
                "#60cda0",
                "#ed8884",
                "#ff9f7f",
                "#0096ff",
                "#9fe6b8",
            ],
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                bottom: "0%",
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    name: "出行分布",
                    type: "pie",
                    radius: ["10%", "70%"],
                    center: ["50%", "50%"],
                    roseType: "radius",
                    // 图形的文字标签
                    label: {
                        fontSize: 10
                    },
                    // 链接图形和文字的线条
                    labelLine: {
                        // length 链接图形的线条
                        length: 6,
                        // length2 链接文字的线条
                        length2: 8
                    },
                    data: [
                        { value: 7.18, name: "岛内-岛内-非共线-非共线" },
                        { value: 12.89, name: "岛内-岛外-非共线-岛外" },
                        { value: 14.63, name: "岛内-岛内-共线-共线" },
                        { value: 15.19, name: "岛内-岛内-共线-非共线" },
                        { value: 19.09, name: "岛外-岛外" },
                        { value: 31.04, name: "岛内-岛外-共线-岛外" },
                    ]
                }
            ]
        };
        myChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    //  line1
    (function() {
        var myChart = echarts.init(document.querySelector(".line0 .chart"));
        var option = {
            tooltip: {
                trigger: "axis"
            },
            legend: {
                top: "0%",
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },

            grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    // x轴更换数据
                    data: [
                        "659路",
                        "952路",
                        "994路",
                        "658路",
                        "947路",
                        "990路",
                        "942路",
                        "651路",
                        "953路",
                        "941路",
                        "857路",
                        "954路",
                        "858路",
                        "951路",
                        "996路"
                    ],
                    // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // x轴线的颜色为   rgba(255,255,255,.2)
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // 修改分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "线路长度",
                    type: "line",
                    smooth: true,
                    // 单独修改当前线条的样式
                    lineStyle: {
                        color: "#0184d5",
                        width: "2"
                    },
                    // 填充颜色设置
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    },
                    // 设置拐点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 8,
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    data: [
                        42.31,
                        28.88,
                        37.53,
                        37.81,
                        25.11,
                        17.28,
                        48.18,
                        44.85,
                        23.64,
                        43.35,
                        24.79,
                        37.90,
                        24.21,
                        35.12,
                        20.51
                    ]
                },
                {
                    name: "共线长度",
                    type: "line",
                    smooth: true,
                    lineStyle: {
                        normal: {
                            color: "#00d887",
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 216, 135, 0.4)"
                                    },
                                    {
                                        offset: 0.8,
                                        color: "rgba(0, 216, 135, 0.1)"
                                    }
                                ],
                                false
                            ),
                            shadowColor: "rgba(0, 0, 0, 0.1)"
                        }
                    },
                    // 设置拐点 小圆点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 5,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    data: [
                        14.3,
                        11.6,
                        11.6,
                        11.2,
                        5.3,
                        9.0,
                        12.2,
                        9.8,
                        10.6,
                        11.1,
                        5.3,
                        8.9,
                        3.9,
                        11.1,
                        11.4
                    ]
                }
            ]
        };
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();

    //full-load
    (function() {
        // 1实例化对象
        var myChart = echarts.init(document.querySelector(".full_load .chart"));
        // 2. 指定配置项和数据
        var option = {
            color: ["#2f89cf"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // 修改图表的大小
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "全月全路段",
                        "全月共线路段",
                        "全月共线路段早高峰",
                        "全月共线路段晚高峰",
                        "工作日全路段",
                        "工作日共线路段",
                        "工作日共线段早高峰",
                        "工作日共线段晚高峰",
                    ],
                    axisTick: {
                        alignWithLabel: true
                    },
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: "12"
                    },
                    // 不显示x坐标轴的样式
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: 12
                    },
                    // y轴的线条改为了 2像素
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 2
                        }
                    },
                    // y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "平均满载率",
                    type: "bar",
                    barWidth: "35%",
                    data: [35.95, 53.51, 79.29,65.13, 36.79, 54.70, 88.57, 69.86],
                    itemStyle: {
                        // 修改柱子圆角
                        barBorderRadius: 5
                    }
                }
            ]
        };
        // 3. 把配置项给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();

</script>
</body>
</html>
